﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>GAPUFF Web Interface</title>
    <link type="text/css" href="css/pepper-grinder/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
    <link type="text/css" href="css/gapuff-web.css" rel="stylesheet" />
    <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#mode1extra").show();
            $("#mode2extra").hide();
            $("#mode3extra").hide();

            $("#radioMode1").click(function () {
                $("#mode1extra").fadeIn();
                $("#mode2extra").hide();
                $("#mode3extra").hide();
            });

            $("#radioMode2").click(function () {
                $("#mode1extra").hide();
                $("#mode2extra").fadeIn();
                $("#mode3extra").hide();
            });

            $("#radioMode3").click(function () {
                $("#mode1extra").hide();
                $("#mode2extra").hide();
                $("#mode3extra").fadeIn();
            });

            $("#radioMode4").click(function () {
                $("#mode1extra").hide();
                $("#mode2extra").hide();
                $("#mode3extra").fadeIn();
            });

            //Set Accordion
            $("#inputlist").accordion({ header: "h3" });
        });
    </script>
</head>
<body>
    <h1>
        GAPUFF WebUI</h1>
    <form id="mainForm" method="post" action="/webrun">
    <div id="inputlist">
        <div>
            <h3>
                <a href="#">泄漏源速率列表</a></h3>
            <div>
                <table>
                    <tr>
                        <td>
                            持续时间（s）
                        </td>
                        <td>
                            速率（mg/s）
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input name="time1" type="text" />
                        </td>
                        <td>
                            <input name="rate1" type="text" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input name="time2" type="text" />
                        </td>
                        <td>
                            <input name="rate2" type="text" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input name="time3" type="text" />
                        </td>
                        <td>
                            <input name="rate3" type="text" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input name="time4" type="text" />
                        </td>
                        <td>
                            <input name="rate4" type="text" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input name="time5" type="text" />
                        </td>
                        <td>
                            <input name="rate5" type="text" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input name="time6" type="text" />
                        </td>
                        <td>
                            <input name="rate6" type="text" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input name="time7" type="text" />
                        </td>
                        <td>
                            <input name="rate7" type="text" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input name="time8" type="text" />
                        </td>
                        <td>
                            <input name="rate8" type="text" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input name="time9" type="text" />
                        </td>
                        <td>
                            <input name="rate9" type="text" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input name="time10" type="text" />
                        </td>
                        <td>
                            <input name="rate10" type="text" />
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div>
            <h3>
                <a href="#">气象参数列表</a></h3>
            <div>
                <table>
                    <tr>
                        <td>
                            事故开始后经历的时间(s)
                        </td>
                        <td>
                            风速
                        </td>
                        <td>
                            风向
                        </td>
                        <td>
                            稳定度
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input name="met1" type="text" />
                        </td>
                        <td>
                            <input name="wspd1" type="text" />
                        </td>
                        <td>
                            <input name="wdir1" type="text" />
                        </td>
                        <td>
                            <input name="stab1" type="text" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input name="met2" type="text" />
                        </td>
                        <td>
                            <input name="wspd2" type="text" />
                        </td>
                        <td>
                            <input name="wdir2" type="text" />
                        </td>
                        <td>
                            <input name="stab2" type="text" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input name="met3" type="text" />
                        </td>
                        <td>
                            <input name="wspd3" type="text" />
                        </td>
                        <td>
                            <input name="wdir3" type="text" />
                        </td>
                        <td>
                            <input name="stab3" type="text" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input name="met4" type="text" />
                        </td>
                        <td>
                            <input name="wspd4" type="text" />
                        </td>
                        <td>
                            <input name="wdir4" type="text" />
                        </td>
                        <td>
                            <input name="stab4" type="text" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input name="met5" type="text" />
                        </td>
                        <td>
                            <input name="wspd5" type="text" />
                        </td>
                        <td>
                            <input name="wdir5" type="text" />
                        </td>
                        <td>
                            <input name="stab5" type="text" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input name="met6" type="text" />
                        </td>
                        <td>
                            <input name="wspd6" type="text" />
                        </td>
                        <td>
                            <input name="wdir6" type="text" />
                        </td>
                        <td>
                            <input name="stab6" type="text" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input name="met7" type="text" />
                        </td>
                        <td>
                            <input name="wspd7" type="text" />
                        </td>
                        <td>
                            <input name="wdir7" type="text" />
                        </td>
                        <td>
                            <input name="stab7" type="text" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input name="met8" type="text" />
                        </td>
                        <td>
                            <input name="wspd8" type="text" />
                        </td>
                        <td>
                            <input name="wdir8" type="text" />
                        </td>
                        <td>
                            <input name="stab8" type="text" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input name="met9" type="text" />
                        </td>
                        <td>
                            <input name="wspd9" type="text" />
                        </td>
                        <td>
                            <input name="wdir9" type="text" />
                        </td>
                        <td>
                            <input name="stab9" type="text" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input name="met10" type="text" />
                        </td>
                        <td>
                            <input name="wspd10" type="text" />
                        </td>
                        <td>
                            <input name="wdir10" type="text" />
                        </td>
                        <td>
                            <input name="stab10" type="text" />
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div>
            <h3>
                <a href="#">计算模式</a></h3>
            <div>
                <ul id="modellist">
                    <li>
                        <input id="radioMode1" name="mode" type="radio" value="matrix" checked="checked" />计算浓度场</li>
                    <li>
                        <input id="radioMode2" name="mode" type="radio" value="point" />计算指定点浓度</li>
                    <li>
                        <input id="radioMode3" name="mode" type="radio" value="contour" />计算等值线</li>
                    <li>
                        <input id="radioMode4" name="mode" type="radio" value="envelop" />计算包络线</li>
                </ul>
                <div id="mode1extra">
                    本模式下不需要额外的参数
                </div>
                <div id="mode2extra">
                    请输入需要计算浓度点的相对坐标（单位：m）
                    <ol>
                        <li>X:<input id="Text1" type="text" />Y:<input id="Text4" type="text" /></li>
                        <li>X:<input id="Text2" type="text" />Y:<input id="Text5" type="text" /></li>
                        <li>X:<input id="Text3" type="text" />Y:<input id="Text6" type="text" /></li>
                    </ol>
                </div>
                <div id="mode3extra">
                    请输入浓度阈值:
                    <ol>
                        <li>
                            <input id="Text7" type="text" />mg/m^3</li>
                        <li>
                            <input id="Text8" type="text" />mg/m^3</li>
                        <li>
                            <input id="Text9" type="text" />mg/m^3</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <hr />
    <div class="buttons">
        <button id="buttonrunmodel" class="positive" type="submit"><img src="apply2.png" alt="" />提交</button>
        <button id="buttonreset" class="negative" type="reset"><img src="cross.png" alt="" />清空</button>
    </div>
    </form>
</body>
</html>
